<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form ref="modalForm" :model="dataSource" status-icon>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item
            label="选择通知住户"
            :label-width="formLabelWidth"
            :rules="[
              { required: true, message: '通知住户不能为空',trigger:'blur,change'}
            ]"
          >
            <el-autocomplete
              v-model="state"
              value-key="householdName"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入内容"
              @select="handleSelect"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item v-if="modalType === 'edit'" label="通知信息编号" :label-width="formLabelWidth">
            <el-input v-model="dataSource.id" disabled autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="modalType === 'edit'" label="住户名称" :label-width="formLabelWidth">
            <el-input v-model="dataSource.householdName" disabled autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item
            label="通知有效时长："
            prop="noticeEffectiveDays"
            :label-width="formLabelWidth"
            :rules="[
              { required: true, message: '通知有效时长不能为空',trigger:'blur,change'}
            ]"
          >
            <el-input v-model="dataSource.noticeEffectiveDays" placeholder="请输入通知的有效时长" autocomplete="off">
              <span slot="suffix">
                /天
              </span>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            v-if="modalType === 'edit'"
            prop="noticeStatus"
            :label-width="formLabelWidth"
            label="通知消息状态："
            :rules="[
              { required: true, message: '通知消息状态不能为空',trigger:'blur,change'}
            ]"
          >
            <el-select v-model="dataSource.noticeStatus" style="position: relative;left: 5px" filterable default-first-option placeholder="请选择通知消息状态">
              <el-option
                key="111"
                label=""
                value=""
              />
              <el-option
                v-for="item in noticeInfoStatusList"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item
            label="通知内容："
            prop="noticeContent"
            :label-width="formLabelWidth"
            :rules="[
              { required: true, message: '通知内容不能为空',trigger:'blur,change'},
              { min: 1,max:100, message: '通知内容在1-100字符之间',trigger:'change'}
            ]"
          >
            <el-input v-model="dataSource.noticeContent" type="textarea" placeholder="请输入通知的通知内容" autocomplete="off">
              <span slot="suffix">
                /天
              </span>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            v-if="dataSource.noticeStatus === '2'"
            prop="noticeStatus"
            :label-width="formLabelWidth"
            label="通知失败原因："
            :rules="[
              { required: true, message: '通知失败原因不能为空',trigger:'blur,change'},
              { min: 1,max:100, message: '通知失败原因在1-100字符之间',trigger:'change'}
            ]"
          >
            <el-input v-model="dataSource.noticeFailResion" type="textarea" placeholder="请输入通知失败原因" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirm('modalForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { modifyOneNoticeInfo, addOneNoticeInfo } from '@/api/ht/xqzhgl/tzgl/tzxxgl'
const { Message } = require('element-ui')
const { getAllHouseholdInfoList } = require('@/api/ht/xqzhgl/zhgl/zhxxgl')
export default {
  name: 'Modal',
  props: {
    noticeInfo: {
      type: Object,
      default: () => {
        return {
          id: '',
          noticeHouseholdCode: '',
          noticeContent: '',
          noticeTime: '',
          noticeEffectiveDays: '',
          noticeStatus: '',
          noticeFailResion: ''
        }
      }
    },
    noticeInfoStatusList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      title: '通知信息',
      dialogFormVisible: false, // 是否展示对话框
      formLabelWidth: '150px', // 表单输入框字段宽度
      modalType: 'add',
      state: '', // 查询对象
      timeout: null, // 设置查询时间
      dataSource: { // 数据源
      },
      householdInfoList: [] // 住户信息列表
    }
  },
  watch: {
    noticeInfo(newdata, prevdata) {
      this.dataSource = newdata
      this.title = '通知信息'
      this.getAllHouseholdInfoListHandle()
    }
  },
  methods: {
    checkModelType(type) {
      this.modalType = type
      this.getAllHouseholdInfoListHandle()
      // 展示对话框
      this.dialogFormVisible = true
      // 判断是编辑还是新增
      if (type === 'add') {
        // 置空
        this.title = '通知信息-新增'
        this.dataSource = {}
      }
    },
    getAllHouseholdInfoListHandle() {
      this.getAllHouseholdInfoList()
    },
    async getAllHouseholdInfoList() {
      const res = await getAllHouseholdInfoList()
      const resp = res.data.respOutMsgHeader
      const data = res.data.main
      if (resp.respCode === 200) {
        this.householdInfoList = data
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    handleConfirm(formName) {
      const type = this.modalType
      // 判断是编辑还是新增
      if (type === 'add') {
        // 调用新增请求
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addNoticeInfoHandle()
          } else {
            console.log('表单缺少数据或者不符合要求')
            return false
          }
        })
      } else {
        // 调用修改请求
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.modifyNoticeInfoHandle()
          } else {
            console.log('表单缺少数据或者不符合要求')
            return false
          }
        })
      }
    },
    querySearchAsync(queryString, cb) {
      var data = this.householdInfoList
      var results = queryString ? data.filter(this.createStateFilter(queryString)) : data
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 1500) // 设置3秒延时
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.householdName.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect(item) {
      this.dataSource.noticeHouseholdCode = item.householdId
    },
    addNoticeInfoHandle() {
      this.addNoticeInfo()
    },
    modifyNoticeInfoHandle() {
      this.modifyNoticeInfo()
    },
    async addNoticeInfo() {
      const res = await addOneNoticeInfo(this.dataSource)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: resp.msg || 'Error',
          type: 'success',
          duration: 2 * 1000
        })
        this.dialogFormVisible = false
        this.reflushDataHandle()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    async modifyNoticeInfo() {
      const res = await modifyOneNoticeInfo(this.dataSource)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: resp.msg || 'Error',
          type: 'success',
          duration: 2 * 1000
        })
        this.dialogFormVisible = false
        this.reflushDataHandle()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    reflushDataHandle() {
      // 调用父组件获取方法刷新数据
      this.$emit('reflushDataHandle')
    }
  }
}
</script>

<style scoped>

</style>
